<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单/转化</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .main-container {
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
        .report-container {
            width: 720px;
            margin-bottom: 20px;
            margin-right: 20px;
            display: inline-block;
            float:left;
        }
        .report-content {
            padding: 20px;
            width: 600px;
            height: 400px;
            position: relative
        }
        .custom-content .search-bar {
            box-sizing: border-box;
            padding: 20px;
        }
    </style>
</head>
<body style="display: none;">
<div id="app" class="container" flex>
    <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>订单/转化</div>
            </div>
            <div flex-box="1">
                <div class="main-container">
                    <!--11分城市订单月增量表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市订单月增量表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="search-bar">
                                    <el-select v-model="orderCityIncrementReport_cityId" placeholder="选择城市">
                                        <el-option
                                                v-for="item in orderCityIncrementReport_cityListForAll"
                                                :key="item.cityAreaId"
                                                :label="item.cityAreaName"
                                                :value="item.cityAreaId">
                                        </el-option>
                                    </el-select>
                                    <el-date-picker
                                            v-model="orderCityIncrementReport_monthStart"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="起始月份">
                                    </el-date-picker>
                                    <el-date-picker
                                            v-model="orderCityIncrementReport_monthEnd"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="截止月份">
                                    </el-date-picker>
                                </div>
                                <div class="report-content">
                                    <v-chart ref="orderCityIncrementReport" :options="orderCityIncrementReport"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--分城市月订单总表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市月订单总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="search-bar">
                                    <el-select v-model="orderCityMonthSummaryReport_cityId" placeholder="选择城市">
                                        <el-option
                                                v-for="item in orderCityMonthSummaryReport_cityListForAll"
                                                :key="item.cityAreaId"
                                                :label="item.cityAreaName"
                                                :value="item.cityAreaId">
                                        </el-option>
                                    </el-select>
                                    <el-date-picker
                                            v-model="orderCityMonthSummaryReport_monthStart"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="起始月份">
                                    </el-date-picker>
                                    <el-date-picker
                                            v-model="orderCityMonthSummaryReport_monthEnd"
                                            type="month"
                                            format="yyyy-MM"
                                            value-format="yyyyMM"
                                            placeholder="截止月份">
                                    </el-date-picker>
                                </div>
                                <div class="report-content">
                                    <v-chart ref="orderCityMonthSummaryReport" :options="orderCityMonthSummaryReport"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--26日订单表总表-->
                    <div class="report-container">
                        <el-section-pannel title="日订单表总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="orderDailySummaryReport_dayRange"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="orderDailySummaryReport" :options="orderDailySummaryReport"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--分城市订单总表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市订单总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="orderCitySummaryReport_date"
                                        type="month"
                                        placeholder="选择月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="orderCitySummaryReport" :options="orderCitySummaryReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--分城市商家归类月表订单分析-->
                    <div class="report-container">
                        <el-section-pannel title="分城市商家归类月表订单" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-select v-model="supplierTypeOrderByCityMonthReport_cityAreaId" placeholder="请选择城市">
                                    <el-option
                                            v-for="item in runningAreaList"
                                            :key="item.cityAreaId"
                                            :label="item.cityAreaName"
                                            :value="item.cityAreaId"
                                            change="cityChange">
                                    </el-option>
                                </el-select>
                                <el-date-picker
                                        v-model="supplierTypeOrderByCityMonthReport_date"
                                        type="month"
                                        placeholder="选择月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="supplierTypeOrderByCityMonthReport" :options="supplierTypeOrderByCityMonthReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--订单复购数分布-->
                    <div class="report-container">
                        <el-section-pannel title="订单复购数分布" border="all" title-padding="0px 20px">
                            <!--<div slot="operator">-->
                                <!--<el-date-picker-->
                                        <!--unlink-panels-->
                                        <!--v-model="orderRepeatPurchaseReport_date"-->
                                        <!--type="daterange"-->
                                        <!--range-separator="至"-->
                                        <!--start-placeholder="开始日期"-->
                                        <!--end-placeholder="结束日期">-->
                                <!--</el-date-picker>-->
                            <!--</div>-->
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="orderRepeatPurchaseReport" :options="orderRepeatPurchaseReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--商家分类订单复购率分析柱图-->
                    <div class="report-container">
                        <el-section-pannel title="商家分类订单复购率分析" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="supplierTypeOrderRepeatPurchaseReport_zhu" :options="supplierTypeOrderRepeatPurchaseReport_zhu" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--朋友圈效果日总表-->
                    <div class="report-container">
                        <el-section-pannel title="朋友圈效果日总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="firendCircleEffectReportService_date"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="firendCircleEffectReportService" :options="firendCircleEffectReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--群效果日总表-->
                    <div class="report-container">
                        <el-section-pannel title="群效果日总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        unlink-panels
                                        v-model="groupEffectReportService_date"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="groupEffectReportService" :options="groupEffectReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--小助手效果表-->
                   <!-- <div class="report-container">
                        <el-section-pannel title="小助手效果表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        unlink-panels
                                        v-model="littleHelperEffectReportService_date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                                <div class="report-content">
                                    <v-chart ref="groupEffectReportService" :options="groupEffectReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--朋友圈效果日明细表-->
                    <div class="report-container">
                        <el-section-pannel title="朋友圈效果日明细表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="firendCircleEffectDetailReportService_beginDate"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <el-table
                                        :data="firendCircleEffectDetailReportService"
                                        stripe
                                        height="440"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="name"
                                            label="小助手名称">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="pv"
                                            label="PV">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="uv"
                                            label="UV">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="orderCount"
                                            label="订单数">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--群效果日明细总表-->
                    <div class="report-container">
                        <el-section-pannel title="群效果日明细总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="groupEffectDetailReportService_beginDate"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <el-table
                                        :data="groupEffectDetailReportService"
                                        stripe
                                        height="440"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="name"
                                            label="群名称">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="pv"
                                            label="PV">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="uv"
                                            label="UV">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="orderCount"
                                            label="订单数">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!-- 朋友圈分时数据表 -->
                    <div class="report-container">
                        <el-section-pannel title="朋友圈分时数据表UV" border="all" title-padding="0px 20px">
                        <div slot="operator">
                            <el-date-picker
                                    unlink-panels
                                    v-model="firendCircleEffectMinSecondReportService_date"
                                    type="daterange"
                                    format="yyyy-MM-dd"
                                    value-format="yyyyMMdd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <div slot="content" class="custom-content">
                            <div class="report-content">
                                <v-chart ref="firendCircleEffectMinSecondReportService" :options="firendCircleEffectMinSecondReportService"/>
                            </div>
                        </div>
                    </el-section-pannel>
                    </div>

                    <!-- 群分时数据表 -->
                    <div class="report-container">
                        <el-section-pannel title="群分时数据表UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        unlink-panels
                                        v-model="groupEffedtMinSecondReportService_date"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="groupEffedtMinSecondReportService" :options="groupEffedtMinSecondReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>


                    <!--商家分类分析横柱图-->
                    <div class="report-container">
                        <el-section-pannel title="商家分类分析" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="supplierTypeReport_heng_date"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="选择月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content" style="height: 800px;">
                                    <v-chart style="height: 800px;" ref="supplierTypeReport_heng" :options="supplierTypeReport_heng" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                </div>
            </div>
        </div>
    </el-admin-menu>
</div>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')

  /**
   * 得到请求链接
   * @param prefix
   * @param path
   */
  function makePath (prefix, path) {
    var reg = new RegExp(/((\.\w+){2}$)/)
    reg.test(window.location.hostname)
    if (path.indexOf('/') !== 0) {
      path = '/' + path
    }
    return window.location.protocol + '//' + prefix + RegExp.$1 + path
  }

  /**
   * 生成折线图的options对象
   * @param title
   */
  function makeOptions (title, options) {
    options.title = {
      text: title
    }
    options.backgroundColor = 'rgb(255,255,255)'
    options.tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    }
    options.toolbox = {
      feature: {
        saveAsImage: {
          title:' '
        }
      }
    }
    options.grid = {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
    return options
  }
  //月份或者日期MM DD格式
  function MMDD(mmdd) {
    if(mmdd<10){
      return ''+'0'+mmdd;
    }else{
      return ''+mmdd;
    }
  }

  /**
   * 初始化options对象
   * 后面有写相同属性就把这里的覆盖
   */
  function extendOptions (options) {
    var init_options = {
      backgroundColor: 'rgb(255,255,255)',
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox:{
        feature: {
          saveAsImage: {
            title:' '
          }
        }
      }
    }
    $.extend(init_options, options);
    return init_options;
  }
</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<!-- <script src="./lib/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

<!-- 11分城市订单月增量表 -->
<script>
  var orderCityIncrementReportMixins = {
    data: function () {
      return {
        orderCityIncrementReport_monthStart: '201901',
        orderCityIncrementReport_monthEnd: '201905',
        orderCityIncrementReport_cityId: '',
        orderCityIncrementReport: {}
      }
    },
    methods: {
      orderCityIncrementReportFetch: function () {
        var that = this
        this.$refs.orderCityIncrementReport.showLoading()
        $.base.sendHttpRequest(makePath('report', '/orderCityIncrementReport'), {
            monthStart: that.orderCityIncrementReport_monthStart,
            monthEnd:that.orderCityIncrementReport_monthEnd,
            cityId:that.orderCityIncrementReport_cityId
          },
          function (resp) {
            var list = resp.data.reportList || []
              var monthArr = list && list.length ? (list[0].list||[]).map(function(el){ return el.month }):[]
              var legendArr = list.map(function(el){ return el.cityName })
              var seriesArr = list.map(function(el){
                return {
                  name:el.cityName,
                  type:'line',
                  areaStyle: {},
                  data:(el.list||[]).map(function(obj){ return obj.orderIncrementCount })
                }
              })
              that.orderCityIncrementReport = makeOptions('分城市订单月增量表', {
                legend: {
                  data:legendArr,
                  top:30
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: monthArr
                },
                yAxis: {
                  type: 'value'
                },
                series: seriesArr
              })

            that.$refs.orderCityIncrementReport.hideLoading()
          }, function (complete) {}, function (error) {})
      }
    },
    mounted:function() {
      this.orderCityIncrementReportFetch()
    },
    computed:{
      orderCityIncrementReport_cityListForAll:function(){
        return [{ cityAreaId:'', cityAreaName:'全部'}].concat(this.runningAreaList)
      }
    },
    watch: {
      orderCityIncrementReport_monthStart:function(val) {
        this.orderCityIncrementReportFetch()
      },
      orderCityIncrementReport_monthEnd:function(val){
        this.orderCityIncrementReportFetch()
      },
      orderCityIncrementReport_cityId:function(val){
        this.orderCityIncrementReportFetch()
      }
    }
  }
</script>

<!-- 分城市月订单总表 -->
<script>
  var orderCityMonthSummaryReportMixins = {
    data: function () {
      return {
        orderCityMonthSummaryReport_monthStart: '201901',
        orderCityMonthSummaryReport_monthEnd: '201905',
        orderCityMonthSummaryReport_cityId: '',
        orderCityMonthSummaryReport: {}
      }
    },
    methods: {
      orderCityMonthSummaryReportFetch: function () {
        var that = this
        this.$refs.orderCityMonthSummaryReport.showLoading()
        $.base.sendHttpRequest(makePath('report', '/orderCityMonthSummaryReport'), {
            monthStart: that.orderCityMonthSummaryReport_monthStart,
            monthEnd:that.orderCityMonthSummaryReport_monthEnd,
            cityId:that.orderCityMonthSummaryReport_cityId
          },
          function (resp) {
            var list = resp.data.reportList || []
              var monthArr = list && list.length ? (list[0].list||[]).map(function(el){ return el.month }):[]
              var legendArr = list.map(function(el){ return el.cityName })
              var seriesArr = list.map(function(el){
                return {
                  name:el.cityName,
                  type:'line',
                  areaStyle: {},
                  data:(el.list||[]).map(function(obj){ return obj.orderSummaryCount })
                }
              })
              that.orderCityMonthSummaryReport = makeOptions('分城市月订单总表', {
                legend: {
                  data:legendArr,
                  top:30
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: monthArr
                },
                yAxis: {
                  type: 'value'
                },
                series: seriesArr
              })

            that.$refs.orderCityMonthSummaryReport.hideLoading()
          }, function (complete) {}, function (error) {})
      }
    },
    mounted:function() {
      this.orderCityMonthSummaryReportFetch()
    },
    computed:{
      orderCityMonthSummaryReport_cityListForAll:function(){
        return [{ cityAreaId:'', cityAreaName:'全部'}].concat(this.runningAreaList)
      }
    },
    watch: {
      orderCityMonthSummaryReport_monthStart:function(val) {
        this.orderCityMonthSummaryReportFetch()
      },
      orderCityMonthSummaryReport_monthEnd:function(val){
        this.orderCityMonthSummaryReportFetch()
      },
      orderCityMonthSummaryReport_cityId:function(val){
        this.orderCityMonthSummaryReportFetch()
      }
    }
  }
</script>

<!-- 26日订单表总表 -->
<script>
  var orderDailySummaryReport = {
    data:function(){
      return {
        orderDailySummaryReport:{},
        orderDailySummaryReport_dayRange:[]
      }
    },
    methods:{
      orderDailySummaryReportFetch:function () {
        var that = this
        this.$refs.orderDailySummaryReport.showLoading()
        $.base.sendHttpRequest(makePath('report', '/orderDailySummaryReport'), {
          dayStart:that.orderDailySummaryReport_dayStart,
          dayEnd:that.orderDailySummaryReport_dayEnd
        },function(resp){
          if (+resp.resultCode !== 0) {
            that.$message.error(resp.reason);
          }
          var list = resp.data.reportList||[];
          that.orderDailySummaryReport = makeOptions('日订单表总表', {
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: list.map(function (item) { return item.day })
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: list.map(function (item) { return item.orderSummaryCount }),
              type: 'line',
              areaStyle: {}
            }]
          })
          that.$refs.orderDailySummaryReport.hideLoading()
        },function(complete){},function(error){})
      }
    },
    mounted:function(){
      this.orderDailySummaryReportFetch();
    },
    watch:{
      orderDailySummaryReport_dayRange:function(val){
        this.orderDailySummaryReportFetch();
      }
    },
    computed:{
      orderDailySummaryReport_dayStart:function(){
        if(this.orderDailySummaryReport_dayRange && this.orderDailySummaryReport_dayRange.length > 0) {
          return this.orderDailySummaryReport_dayRange[0]
        }
        return null;
      },
      orderDailySummaryReport_dayEnd:function(){
        if(this.orderDailySummaryReport_dayRange && this.orderDailySummaryReport_dayRange.length > 1) {
          return this.orderDailySummaryReport_dayRange[1]
        }
        return null;
      }
    }
  }
</script>

<!-- 朋友圈效果日总表 -->
<script>
  var firendCircleEffectReportServiceMixins = {
    data:function(){
      return {
        firendCircleEffectReportService:{},
        firendCircleEffectReportService_date: ['20190501','20190509']
      }
    },
    methods:{
      firendCircleEffectReportServiceFetch:function(){
        var that = this;
        that.$refs.firendCircleEffectReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/firendCircleEffectReportService'), {
          beginDate: that.firendCircleEffectReportService_dayStart,
          endDate: that.firendCircleEffectReportService_dayEnd
        },function(resp){
          var list = resp.data.list||[];
          var dayArr = list.map(function(item){ return item.date })
          var uvArr = list.map(function(item){ return item.uv })
          var orderArr = list.map(function(item){ return item.orderCount })
          that.firendCircleEffectReportService = makeOptions('朋友圈效果日总表', {
            legend: {
              data: ['UV', '订单']
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: dayArr
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series:[
              {
                name:'UV',
                type:'line',
                areaStyle:{},
                data:uvArr
              },
              {
                name:'订单',
                type:'line',
                areaStyle:{},
                data:orderArr
              }
            ]
          })
          that.$refs.firendCircleEffectReportService.hideLoading()
          //that.firendCircleEffectReportService = resp.data.list||[];
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.firendCircleEffectReportServiceFetch()
    },
    watch:{
      firendCircleEffectReportService_date:function(val){
        this.firendCircleEffectReportServiceFetch();
      }
    },
    computed:{
      firendCircleEffectReportService_dayStart:function(){
        if(this.firendCircleEffectReportService_date && this.firendCircleEffectReportService_date.length > 0) {
          return this.firendCircleEffectReportService_date[0]
        }
        return null;
      },
      firendCircleEffectReportService_dayEnd:function(){
        if(this.firendCircleEffectReportService_date && this.firendCircleEffectReportService_date.length > 1) {
          return this.firendCircleEffectReportService_date[1]
        }
        return null;
      }
    }
  }
</script>

<!--分城市订单总表-->
<script>
  var orderCitySummaryReportMixins = {
    data:function(){
      return {
        orderCitySummaryReport: {},
        orderCitySummaryReport_date: null,
        orderCitySummaryReport_month: null
      }
    },
    methods:{
      orderCitySummaryReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/orderCitySummaryReport'), {month:this.orderCitySummaryReport_month,},
          function(resp){
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.orderCitySummaryReport = extendOptions(
                {
                  title: {
                    text: '分城市订单总表'
                  },
                  color: ['#FB7171'],
                  xAxis : [
                    {
                      type : 'category',
                      data : list.map(function (item) {
                        return item.city
                      }),
                      axisTick: {
                        alignWithLabel: true
                      }
                    }
                  ],
                  yAxis : {
                    type : 'value'
                  },
                  series : [
                    {
                      label: {
                        normal: {
                          show: true,
                          position: 'top'
                        }
                      },
                      name:'订单数',
                      type:'bar',
                      barWidth: '60%',
                      data:list.map(function (item) {
                        return item.orderSummaryCount
                      })
                    }
                  ]
                }
              )
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.orderCitySummaryReportFetch();
    },
    watch:{
      orderCitySummaryReport_date(val){
        var dayStart = (val.getFullYear()+''+MMDD(val.getMonth() + 1));
        this.orderCitySummaryReport_month = dayStart;
        this.orderCitySummaryReportFetch();
      }
    }
  }
</script>

<!--分城市商家归类月表订单分析-->
<script>
  var supplierTypeOrderByCityMonthReportMixins = {
    data:function(){
      return {
        supplierTypeOrderByCityMonthReport: null,
        supplierTypeOrderByCityMonthReport_cityAreaId: null,
        supplierTypeOrderByCityMonthReport_date: '2019-05',
        supplierTypeOrderByCityMonthReport_month: '201905'
      }
    },
    methods:{
      supplierTypeOrderByCityMonthReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/supplierTypeOrderByCityMonthReport'),
          {
            city: that.supplierTypeOrderByCityMonthReport_cityAreaId,
            month: that.supplierTypeOrderByCityMonthReport_month
          },
          function(resp){
            var list = resp.data.reportList||[];
            that.supplierTypeOrderByCityMonthReport = extendOptions(
              {
                title : {
                  text: '分城市商家归类月表订单分析',
                  subtext: '',
                  x:'center'
                },
                tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: list.map(function (item) {
                    return item.supplierTypeName
                  })
                },
                series : [
                  {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    label: {
                      normal: {
                        show: true,
                        formatter: '{b}: {c}'
                      }
                    },
                    data:list.map(function (item) {
                      var obj = {};
                      obj.name = item.supplierTypeName;
                      obj.value = item.orderSummaryCount
                      return obj
                    }),
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
            )
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.supplierTypeOrderByCityMonthReportFetch();
    },
    watch:{
      supplierTypeOrderByCityMonthReport_cityAreaId(val){
        this.supplierTypeOrderByCityMonthReport_cityAreaId = val;
        this.supplierTypeOrderByCityMonthReportFetch();
      },
      supplierTypeOrderByCityMonthReport_date(val){
        var date = (val.getFullYear()+''+MMDD(val.getMonth()+1));
        this.supplierTypeOrderByCityMonthReport_month = date;
        this.supplierTypeOrderByCityMonthReportFetch();
      }
    }
  }
</script>

<!--订单复购数分布-->
<script>
  var orderRepeatPurchaseReportMixins = {
    data:function(){
      return {
        orderRepeatPurchaseReport: null,
        orderRepeatPurchaseReport_date: null,
        dayStart: null,
        dayEnd: null
      }
    },
    methods:{
      orderRepeatPurchaseReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/orderRepeatPurchaseReport'), {},
          function(resp){
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.orderRepeatPurchaseReport = extendOptions(
                {
                  title : {
                    text: '订单复购数分布',
                    subtext: '',
                    x:'center'
                  },
                  tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: list.map(function (item) {
                      return item.repeatPurchaseTimes
                    })
                  },
                  series : [
                    {
                      name: '访问来源',
                      type: 'pie',
                      radius : '55%',
                      center: ['50%', '60%'],
                      label: {
                        normal: {
                          show: true,
                          formatter: '{b}: {c}'
                        }
                      },
                      data:list.map(function (item) {
                        var obj = {};
                        obj.name = item.repeatPurchaseTimes;
                        obj.value = item.userCount
                        return obj
                      }),
                      itemStyle: {
                        emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]
                }
              )
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.orderRepeatPurchaseReportFetch();
    },
    watch:{
      orderRepeatPurchaseReport_date(val){
        var start = val[0];
        var end = val[1];
        var dayStart = (start.getFullYear()+''+start.getMonth()+''+start.getDate());
        var dayEnd = (end.getFullYear()+''+end.getMonth()+''+end.getDate());
        this.dayStart = dayStart;
        this.dayEnd = dayEnd;
        this.orderRepeatPurchaseReportFetch();
      }
    }
  }
</script>


<!--商家分类订单复购率分析柱图-->
<script>
  var supplierTypeOrderRepeatPurchaseReport_zhuMixins = {
    data:function(){
      return {
        supplierTypeOrderRepeatPurchaseReport_zhu: null,
      }
    },
    methods:{
      supplierTypeOrderRepeatPurchaseReport_zhuFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/supplierTypeOrderRepeatPurchaseReport'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.supplierTypeOrderRepeatPurchaseReport_zhu = extendOptions(
                {
                  title: {
                    text: '商家分类订单复购率分析',
                  },
                  tooltip: {
                    trigger: 'axis',
                    formatter:'{c}%',
                    axisPointer: {
                      type: 'shadow'
                    }
                  },
                  legend: {
                    data: ['复购率']
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                  },
                  yAxis: {
                    type: 'category',
                    data: list.map(function (item) {
                      return item.supplierTypeName
                    })
                  },
                  series: [
                    {
                      name: '复购率',
                      type: 'bar',
                      itemStyle: {
                        normal: {
                          color: function(params) {
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                              '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                              '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                          },
                          label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}%'　　　　//这是关键，在需要的地方加上就行了
                          }
                        }
                      },
                      data: list.map(function (item) {
                        return (item.repeatPurchaseRate * 100).toFixed(2)
                      })
                    }
                  ]
                }
              )
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.supplierTypeOrderRepeatPurchaseReport_zhuFetch();
    },
    watch:{
    }
  }
</script>

<!--群效果日总表-->
<script>
  var groupEffectReportServiceMixins = {
    data:function(){
      return {
        groupEffectReportService: {},
        groupEffectReportService_date: ['20190501','20190509']
      }
    },
    methods:{
      groupEffectReportServiceFetch(){
        var that = this;
        that.$refs.groupEffectReportService.showLoading()
        $.base.sendHttpRequest(makePath('report','/groupEffectReportService'), {
            beginDate:this.groupEffectReportService_dayStart,
            endDate:this.groupEffectReportService_dayEnd},
          function(resp){
            if(resp.data.list){
              var list = resp.data.list||[];
              //that.groupEffectReportService = list;
              var dayArr = list.map(function(item){ return item.date })
              var uvArr = list.map(function(item){ return item.uv })
              var orderArr = list.map(function(item){ return item.orderCount })
              that.groupEffectReportService = makeOptions('群效果日总表', {
                legend: {
                  data: ['UV', '订单']
                },
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: dayArr
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series:[
                  {
                    name:'UV',
                    type:'line',
                    areaStyle:{},
                    data:uvArr
                  },
                  {
                    name:'订单',
                    type:'line',
                    areaStyle:{},
                    data:orderArr
                  }
                ]
              })
              that.$refs.groupEffectReportService.hideLoading()
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.groupEffectReportServiceFetch();
    },
    watch:{
      groupEffectReportService_date(val){
        this.groupEffectReportServiceFetch();
      }
    },
    computed:{
      groupEffectReportService_dayStart(){
        if (this.groupEffectReportService_date && this.groupEffectReportService_date.length > 0) {
          return this.groupEffectReportService_date[0]
        }
        return null
      },
      groupEffectReportService_dayEnd(){
        if (this.groupEffectReportService_date && this.groupEffectReportService_date.length > 1) {
          return this.groupEffectReportService_date[1]
        }
        return null
      }
    }
  }
</script>

<!--小助手效果表-->
<script>
  var littleHelperEffectReportServiceMixins = {
    data:function(){
      return {
        littleHelperEffectReportService: null,
        littleHelperEffectReportService_date: null,
        littleHelperEffectReportService_dayStart: null,
        littleHelperEffectReportService_dayEnd: null
      }
    },
    methods:{
      littleHelperEffectReportServiceFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/littleHelperEffectReportService'), {
            dayStart:this.littleHelperEffectReportService_dayStart,
            dayEnd:this.littleHelperEffectReportService_dayEnd},
          function(resp){
            if(resp.data.list){
              var list = resp.data.list||[];
              that.littleHelperEffectReportService = list;
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.littleHelperEffectReportServiceFetch();
    },
    watch:{
      littleHelperEffectReportService_date(val){
        var start = val[0];
        var end = val[1];
        var dayStart = (start.getFullYear()+'-'+MMDD(start.getMonth()+1)+'-'+MMDD(start.getDate()));
        var dayEnd = (end.getFullYear()+'-'+MMDD(end.getMonth()+1)+'-'+MMDD(end.getDate()));
        this.littleHelperEffectReportService_dayStart = dayStart;
        this.littleHelperEffectReportService_dayEnd = dayEnd;
        this.littleHelperEffectReportServiceFetch();
      }
    }
  }
</script>

<!--朋友圈效果日明细表-->
<script>
  var firendCircleEffectDetailReportServiceMixins = {
    data:function(){
      return {
        firendCircleEffectDetailReportService: null,
        firendCircleEffectDetailReportService_beginDate: '20190509'
      }
    },
    methods:{
      firendCircleEffectDetailReportServiceFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/firendCircleEffectDetailReportService'), {
            beginDate:this.firendCircleEffectDetailReportService_beginDate
          },
          function(resp){
            if(resp.data.list){
              var list = resp.data.list||[];
              that.firendCircleEffectDetailReportService = list;
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.firendCircleEffectDetailReportServiceFetch();
    },
    watch:{
      firendCircleEffectDetailReportService_beginDate:function(val){
        this.firendCircleEffectDetailReportServiceFetch();
      }
    }
  }
</script>

<!--群效果日明细总表-->
<script>
  var groupEffectDetailReportServiceMixins = {
    data:function(){
      return {
        groupEffectDetailReportService: null,
        groupEffectDetailReportService_beginDate: '20190509'
      }
    },
    methods:{
      groupEffectDetailReportServiceFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/groupEffectDetailReportService'), {
            beginDate:this.groupEffectDetailReportService_beginDate
          },
          function(resp){
            if(resp.data.list){
              var list = resp.data.list||[];
              that.groupEffectDetailReportService = list;
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.groupEffectDetailReportServiceFetch();
    },
    watch:{
      groupEffectDetailReportService_beginDate:function(val){
        this.groupEffectDetailReportServiceFetch();
      }
    }
  }
</script>

<!-- 朋友圈分时数据表 -->
<script>
    var firendCircleEffectMinSecondReportServiceMixins = {
      data:function(){
        return {
          firendCircleEffectMinSecondReportService:{},
          firendCircleEffectMinSecondReportService_date:['20190501','20190503']
        }
      },
      methods:{
        firendCircleEffectMinSecondReportServiceFetch:function(){
          var that = this;
          that.$refs.firendCircleEffectMinSecondReportService.showLoading()
          $.base.sendHttpRequest(makePath('report','/firendCircleEffectMinSecondReportService'), {
            beginDate:this.firendCircleEffectMinSecondReportService_beginDate,
            endDate:this.firendCircleEffectMinSecondReportService_endDate},
            function (resp) {
              var list = resp.data.list||[];
              var clockArr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
              var legendArr = list.map(function(item){ return item.date })
              var seriesArr = list.map(function(item){
                return {
                  name:item.date,
                  type:'line',
                  areaStyle:{},
                  data:(item.hours||[]).map(function(el){ return el.uv })
                }
              })

              that.firendCircleEffectMinSecondReportService = makeOptions('朋友圈分时数据表UV', {
                legend: {
                  data: legendArr
                },
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: clockArr
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series:seriesArr
              })
              that.$refs.firendCircleEffectMinSecondReportService.hideLoading()
            },function(complete){},function(error){})
        }
      },
      mounted:function(){
        this.firendCircleEffectMinSecondReportServiceFetch()
      },
      watch:{
        firendCircleEffectMinSecondReportService_date:function(val){
          this.firendCircleEffectMinSecondReportServiceFetch()
        }
      },
      computed:{
        firendCircleEffectMinSecondReportService_beginDate:function(){
          if (this.firendCircleEffectMinSecondReportService_date && this.firendCircleEffectMinSecondReportService_date.length > 0) {
            return this.firendCircleEffectMinSecondReportService_date[0]
          }
          return null
        },
        firendCircleEffectMinSecondReportService_endDate:function(){
          if (this.firendCircleEffectMinSecondReportService_date && this.firendCircleEffectMinSecondReportService_date.length > 1) {
            return this.firendCircleEffectMinSecondReportService_date[1]
          }
          return null
        }
      }
    }
</script>

<!-- 群分时数据表 -->
<script>
    var groupEffedtMinSecondReportServiceMixins = {
      data:function(){
        return {
          groupEffedtMinSecondReportService:{},
          groupEffedtMinSecondReportService_date:['20190501','20190503']
        }
      },
      methods:{
        groupEffedtMinSecondReportServiceFetch:function(){
          var that = this;
          that.$refs.groupEffedtMinSecondReportService.showLoading()
          $.base.sendHttpRequest(makePath('report','/groupEffedtMinSecondReportService'), {
            beginDate:this.groupEffedtMinSecondReportService_beginDate,
            endDate:this.groupEffedtMinSecondReportService_endDate,
            channelType:2
            },
            function (resp) {
              var list = resp.data.list||[];
              var clockArr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
              var legendArr = list.map(function(item){ return item.date })
              var seriesArr = list.map(function(item){
                return {
                  name:item.date,
                  type:'line',
                  areaStyle:{},
                  data:(item.hours||[]).map(function(el){ return el.uv })
                }
              })

              that.groupEffedtMinSecondReportService = makeOptions('群分时数据表UV', {
                legend: {
                  data: legendArr
                },
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: clockArr
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series:seriesArr
              })
              that.$refs.groupEffedtMinSecondReportService.hideLoading()
            },function(complete){},function(error){})
        }
      },
      mounted:function(){
        this.groupEffedtMinSecondReportServiceFetch()
      },
      watch:{
        groupEffedtMinSecondReportService_date:function(val){
          this.groupEffedtMinSecondReportServiceFetch()
        }
      },
      computed:{
        groupEffedtMinSecondReportService_beginDate:function(){
          if (this.groupEffedtMinSecondReportService_date && this.groupEffedtMinSecondReportService_date.length > 0) {
            return this.groupEffedtMinSecondReportService_date[0]
          }
          return null
        },
        groupEffedtMinSecondReportService_endDate:function(){
          if (this.groupEffedtMinSecondReportService_date && this.groupEffedtMinSecondReportService_date.length > 1) {
            return this.groupEffedtMinSecondReportService_date[1]
          }
          return null
        }
      }
    }
</script>

<!--商家分类分析横柱图-->
<script>
  var supplierTypeReport_hengMixins = {
    data:function(){
      return {
        supplierTypeReport_heng: null,
        supplierTypeReport_heng_date: null
      }
    },
    methods:{
      supplierTypeReport_hengFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/supplierTypeReport'), {month:that.supplierTypeReport_heng_date},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.supplierTypeReport_heng = extendOptions(
                {
                  title: {
                    text: '商家分类分析',
                  },
                  legend: {
                    data: ['PV', 'UV','订单']
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                  },
                  yAxis: {
                    type: 'category',
                    data: list.map(function (item) {
                      return item.supplierTypeName
                    })
                  },
                  series: [
                    {
                      name: 'PV',
                      type: 'bar',
                      itemStyle: {
                        normal: {
                          label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}'　　　　//这是关键，在需要的地方加上就行了
                          }
                        }
                      },
                      data: list.map(function (item) {
                        return item.PV
                      })
                    },
                    {
                      name: 'UV',
                      type: 'bar',
                      itemStyle: {
                        normal: {
                          label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}'　　　　//这是关键，在需要的地方加上就行了
                          }
                        }
                      },
                      data: list.map(function (item) {
                        return item.UV
                      })
                    },
                    {
                      name: '订单',
                      type: 'bar',
                      itemStyle: {
                        normal: {
                          label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}'　　　　//这是关键，在需要的地方加上就行了
                          }
                        }
                      },
                      data: list.map(function (item) {
                        return item.orderSummaryCount
                      })
                    }
                  ]
                }
              )
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.supplierTypeReport_hengFetch();
    },
    watch:{
      supplierTypeReport_heng_date:function(val){
        this.supplierTypeReport_heng_date = val;
        this.supplierTypeReport_hengFetch();
      }
    }
  }
</script>

<script>
  Vue.component('v-chart', VueECharts)
  new Vue({
    el: '#app',
    mixins: [
      $.base.globalMixin,
      orderCityIncrementReportMixins,
      orderCityMonthSummaryReportMixins,
      orderDailySummaryReport,
      firendCircleEffectReportServiceMixins,
      orderCitySummaryReportMixins,
      supplierTypeOrderByCityMonthReportMixins,
      orderRepeatPurchaseReportMixins,
      groupEffectReportServiceMixins,
      littleHelperEffectReportServiceMixins,
      firendCircleEffectDetailReportServiceMixins,
      groupEffectDetailReportServiceMixins,
      firendCircleEffectMinSecondReportServiceMixins,
      groupEffedtMinSecondReportServiceMixins,
      supplierTypeOrderRepeatPurchaseReport_zhuMixins,
      supplierTypeReport_hengMixins
    ],
    data: function () {
      return {
        username: '',
        enterDate: '',
        visible: false,
        // 来自test_data.js
        menus: [],
        // 来自test_data.js
        userDetail: {},
        initOptions: {},
        runningAreaList:[]
      }
    },
    created(){
      this.getRunningAreaFetch()
    },
    methods: {
      getRunningAreaFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('basic','/getRunningArea'), {},
          function(resp){
            that.runningAreaList = resp.data.runningAreaList
          },
          function(complete){},
          function(error){}
        )
      },
      logout:function() {
        window.location.href = 'login.html'
      }
    },
    mounted:function() {
      document.querySelector('body').style.display = 'block'
    }
  })
</script>
</body>
</html>